<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				创建群聊
			</view>
			<view class="head_right">

			</view>
		</view>
		<view class="uploadImg" @tap="getToken('headImg')">
			<image v-if="userHeadImg==''" src="../../../static/index/zhaopian.png" mode=""></image>
			<image v-else :src="userHeadImg" mode=""></image>
		</view>
		<input class="groupName" type="text" v-model="groupName" placeholder="填写群名称(2-32个字)" />
		<view class="btn" @tap="createGroup()">
			提交
		</view>
	</view>
</template>

<script>
	import webim from '../../../common/webim_wx.min.js'
	import qiniu from '../../../common/qiniuUploader.js'
	export default {
		data() {
			return {
				userHeadImg: '',
				groupName: '',
			};
		},
		methods: {
			//获取输入框的值
			// onKeyUserNameInput: function(event) {  
			//              this.groupName = event.target.value  
			// 	console.log(this.groupName)
			//          },
			//创建群组
			createGroup() {
				var loginInfo = uni.getStorageSync('loginInfo')
				// var sel_friends = this.groupName;
				var member_list = [];
				if (this.groupName == '') {
					console.log('请输入群组名称');
					return;
				}
				var options = {
					// 'GroupId': loginInfo.identifier,
					'Owner_Account': loginInfo.identifier + '',
					'Type': "Public", //Private/Public/ChatRoom/AVChatRoom
					'Name': this.groupName,
					'FaceUrl': this.userHeadImg,
					'MemberList': member_list
				};
				webim.createGroup(
					options,
					function(resp) {
						// $('#create_group_dialog').modal('hide');
						console.log('创建群成功');
						//读取我的群组列表
						uni.redirectTo({
							url: "/pages/Friend/groupTalk/groupTalk"
						})
					},
					function(err) {
						console.log(err.ErrorInfo);
					}
				);
			},
			getToken() {
				var me = this;
				var data = {
					key: null,
				}
				this.myAjaxNewPost({
					model: 'push',
					controllerName: 'upload',
					actionName: 'getToken',
					data: data,
					successBack: function(res) {

						me.token = res.data.data
						console.log(me.token)
						if (me.token != '') {
							me.selectImg()
						}

					}
				})
			},
			selectImg() { //上传头像
				var me = this;
				uni.showActionSheet({
					itemList: ['拍照', '相册'],
					itemColor: '#008AFF',
					success: function(res) {
						var index = res.tapIndex;
						if (index == 1) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album'], //从相册选择
								success: function(res) {
									console.log(res)
									var filePath = res.tempFilePaths[0];
									// console.log(JSON.stringify(res.tempFilePaths));
									// 交给七牛上传
									if (me.token != '') {
										uni.showLoading({
											title: '上传中'
										})
										qiniu.upload(filePath, (res) => {
											console.log(res.imageURL)
											var imageURL = res.imageURL
											me.userHeadImg = imageURL
											uni.hideLoading()
											console.log('file url is: ' + res.fileUrl);
										}, (error) => {
											uni.showToast({
												title: '上传失败',
												icon: null
											});
											console.log('error: ' + error);
										}, {
											region: 'ECN',
											domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
											key: uni.getStorageSync('user_id')+'groupHead'+me.generateMixed(8) , // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
											// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
											uptoken: me.token, // 由其他程序生成七牛 uptoken
											// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
											uptokenFunc: function() {
												return '[yourTokenString]';
											}
										}, (res) => {
											console.log('上传进度', res.progress)
											console.log('已经上传的数据长度', res.totalBytesSent)
											console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)

										}, () => {
											// 取消上传
										}, () => {
											// `before` 上传前执行的操作
										}, (err) => {
											// `complete` 上传接受后执行的操作(无论成功还是失败都执行)

										});
									}

								}
							});
						} else if (index == 0) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '], //相机
								success: function(res) {
									// console.log(JSON.stringify(res.tempFilePaths));
									var filePath = res.tempFilePaths[0];
									// console.log(JSON.stringify(res.tempFilePaths));
									// 交给七牛上传
									if (me.token != '') {
										uni.showLoading({
											title: '上传中'
										})
										qiniu.upload(filePath, (res) => {
											console.log(res.imageURL)
											var imageURL = res.imageURL
											me.userHeadImg = imageURL
											uni.hideLoading()
											console.log('file url is: ' + res.fileUrl);
										}, (error) => {
											uni.showToast({
												title: '上传失败',
												icon: null
											});
											console.log('error: ' + error);
										}, {
											region: 'ECN',
											domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
											key: uni.getStorageSync('user_id')+'groupHead'+me.generateMixed(8), // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
											// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
											uptoken: me.token, // 由其他程序生成七牛 uptoken
											// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
											uptokenFunc: function() {
												return '[yourTokenString]';
											}
										}, (res) => {
											console.log('上传进度', res.progress)
											console.log('已经上传的数据长度', res.totalBytesSent)
											console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
										}, () => {
											// 取消上传
										}, () => {
											// `before` 上传前执行的操作
										}, (err) => {
											// `complete` 上传接受后执行的操作(无论成功还是失败都执行)

										});
									}
								}
							});
						}
					}
				});
			},
			generateMixed(n) {
				var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
					'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g',
					'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
				];
				var res = "";
				for (var i = 0; i < n; i++) {
					var id = Math.ceil(Math.random() * 17);
					res += chars[id];
				}
				return res;
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
	}
</script>

<style scoped>
	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 162upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
	}

	.head image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		height: 82upx;
		width: 106upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		font-size: 32upx;
		padding-top: 70upx;
	}

	.head_mid {
		padding-top: 90upx;
	}

	.head_right {
		width: 106upx;
	}

	.uploadImg image {
		width: 160upx;
		height: 160upx;
		padding-top: 185upx;
		padding-left: 295upx;
	}

	.groupName {
		border-bottom: 1upx solid #E6E6E6;
		text-align: center;
		padding: 10upx 24upx;
		font-size: 28upx;
		margin: 100upx 24upx 120upx 24upx;
	}
</style>
